<template>
  <!-- options 属性 指定选项数组 -->
  <!-- separator 分隔符 -->
  <!-- :value="value" 是: 让父组件传过来的 value (也就是部门 id), 视图也跟着更新-->
  <!-- @change="changeValue"是: 监听 级联的 change事件, 通知给父组件 -->
  <el-cascader
    :value="value"
    :options="treeData"
    size="mini"
    separator="-"
    :props="props"
    @change="changeValue"
  />
</template>
<script>
import { getDepartment } from '@/api/department'
import { transListToTreeData } from '@/utils'
export default {
  // 接收 父组件 传过来的 部门 id
  props: {
    value: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      treeData: [], // 赋值给 级联组件的 options
      props: {
        label: 'name', // 要展示的字段
        value: 'id'// 要存储的字段
      }
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    // 得到部门列表
    async getDepartment() {
      // 将组织架构的数据 转化树形赋值给 treeData
      this.treeData = transListToTreeData(await getDepartment(), 0)
    },
    // @change 当选中节点变化时触发	, 参数是选中节点的值
    // 监听级联的 change 事件 , 参数是一个数组, 数组最后一位就是真正选中的部门的 id
    changeValue(list) {
      // console.log(list)
      if (list.length > 0) {
        // 将选中的部门 id 传给 父组件, 父组件中是 v-model, 相当于 :value + @input
        this.$emit('input', list[list.length - 1])
      } else {
        this.$emit('input', null) // 长度为 0, 说明值为空
      }
    }
  }
}
</script>
